<template>
  <div>
    <div class="card">
      <!-- 头部内容 -->
      <div class="card-hearder">
        <div class="card-hearder-column-1">
          <!-- <a-checkbox /> -->
          <span style="margin-left: 5px"
            >订单号:<button id="button"
              ><a @click="detailHandle(rowInfo)">{{ rowInfo.orderId }}</a></button>
            &nbsp;&nbsp; <a id="tag-copy" @click="copyHandle(rowInfo.orderId)">copy</a> |
            <j-ellipsis :value="rowInfo.storeName" :length="25"></j-ellipsis> | {{ rowInfo.orderSource_dictText }}</span>
      
          <a-tag :color="setTagColor(rowInfo.orderStatus)">{{ rowInfo.orderStatus_dictText }}</a-tag>
        </div>
        <div class="card-hearder-column-2">
          <label>买家:</label> <j-ellipsis :value="rowInfo.buyerName" :length="12"></j-ellipsis>|
          <j-ellipsis :value="rowInfo.buyerEmail" :length="15"></j-ellipsis>
        </div>
        <div class="card-hearder-column-3"><label>市场:</label>{{ rowInfo.site }}</div>
        <div class="card-hearder-column-4">
          <div>
            <label>最晚发货:</label>
            <span v-if="rowInfo.latestShipDate && rowInfo.deliveryWay === 'MFN'">
              <span style="color: #f64000; margin-right: 4px" v-if="calculateTimeOutShipDate(rowInfo)">{{calculateTimeOutShipDate(rowInfo)}}</span>
              <span v-else> -- </span>
              <span>({{ rowInfo.latestShipDate ? rowInfo.latestShipDate.slice(0, 16) : '' }})</span>
            </span>
          </div>
          <div>
            <label>最晚交付:</label>
            <span v-if="rowInfo.latestDeliveryDate"> -- ({{rowInfo.latestDeliveryDate.slice(0, 16)}})</span>
          </div>
        </div>
      </div>
      <!-- 头部内容 结束-->
      <div class="container">
        <!-- 第一列：内部再分为两列 商品信息部分-->
        <div class="column column-1">
          <div class="sub-column" v-if="rowInfo.goodInfos && rowInfo.goodInfos.length > 0">
            <!-- 默认展示前2条 -->
            <ul>
              <li v-for="(goodItem, index) in rowInfo.goodInfos.slice(0, 2)" :key="goodItem.id">
                <div class="sub-column-row">
                  <div style="display: flex">
                    <div>
                      <img :src="goodItem.picturePath ? goodItem.picturePath : emptyImg" width="60px" height="60px" />
                    </div>
                    <div style="margin-left: 5px">
                      <div>
                        <a-tooltip :title="goodItem.goodsName">
                          <button id="button" class="goods-name"
                            ><a @click="goodLinkHandle(goodItem)">{{ goodItem.goodsName }}</a></button>    
                        </a-tooltip>
                      </div>
                      <div>
                        SKU:<span v-if="goodItem.sku"
                          >{{ goodItem.sku }} &nbsp;&nbsp;
                          <a id="tag-copy" @click="copyHandle(goodItem.sku)" style="margin: 0 15px 0 5px">copy</a></span
                        >
                        &nbsp;&nbsp;
                        <span v-else style="color: #d9001b">无</span>
                        数量:{{ goodItem.quantity }}
                      </div>
                      <div>促销码:{{ goodItem.promotionIds }}</div>
                    </div>
                  </div>
                  <div>ASIN：{{ goodItem.asin }}</div>
                </div>
                <div class="sub-column-row-right">
                  <div>
                    <div>{{ goodItem.currencyCode }}</div>
                    <div>{{ calculateUnitPrice(goodItem.price, goodItem.quantity) }}</div>
                  </div>
                </div>
              </li>
              <!-- 展开其余几条数据 -->
              <template v-if="rowInfo.toggleSearchStatus">
                <li v-for="(goodItem, index) in rowInfo.goodInfos.slice(2)" :key="goodItem.id">
                  <div class="sub-column-row">
                    <div style="display: flex">
                      <div>
                        <img :src="goodItem.picturePath ? goodItem.picturePath : emptyImg" width="60px" height="60px" />
                      </div>
                      <div style="margin-left: 5px">
                        <div>
                          <a-tooltip :title="goodItem.goodsName">
                            <button  id="button" class="goods-name"
                              ><a @click="goodLinkHandle(goodItem)">{{ goodItem.goodsName }}</a></button>                 
                          </a-tooltip>
                        </div>
                        <div>
                          SKU:<span v-if="goodItem.sku"
                            >{{ goodItem.sku }} &nbsp;&nbsp;
                            <a id="tag-copy" @click="copyHandle(goodItem.sku)" style="margin: 0 15px 0 5px">copy</a></span>                             
                          &nbsp;&nbsp;
                          <span v-else style="color: #d9001b">无</span>
                          数量:{{ goodItem.quantity }}
                        </div>
                        <div>促销码:{{ goodItem.promotionIds }}</div>
                      </div>
                    </div>
                    <div>ASIN：{{ goodItem.asin }}</div>
                  </div>
                  <div class="sub-column-row-right">
                    <div>
                      <div>{{ goodItem.currencyCode }}</div>
                      <div>{{ calculateUnitPrice(goodItem.price, goodItem.quantity) }}</div>
                    </div>
                  </div>
                </li>
              </template>
            </ul>
            <div class="expand" v-if="rowInfo.goodInfos.length > 2">
              <a @click="toggleClick(rowInfo.toggleSearchStatus)">
                <b
                  ><span
                    v-text="!rowInfo.toggleSearchStatus ? `展开其余${rowInfo.goodInfos.length - 2}个商品信息` : '收起'"
                  ></span>
                  <a-icon :type="!rowInfo.toggleSearchStatus ? 'down' : 'up'"
                /></b>
              </a>
            </div>
          </div>
        </div>
        <!-- 商品信息结束 -->
        <!-- 第二列 -->
        <div class="column column-2">
          <div>
            <div>付款方式:{{ rowInfo.paymentMethod }}</div>   
            <div>总价:{{ rowInfo.totalAmount }}{{ rowInfo.currencyCode }}(含运费<span style="color: #d9001b">
              {{ rowInfo.totalShippingFee}}</span>) 
            </div>
            <div>利润:</div>
            <div>利润率：</div>
            <div>
              <!-- <button id="button"><a @click="searchDetailHandle(rowInfo.orderId)">查看所有</a></button> -->
              <a-popover trigger="click" :visible="visibleActived === rowInfo.orderId" @visibleChange="handleVisibleChange">
                <template slot="title">
                  <div style="display: flex;justify-content: space-between;padding: 5px;">
                  <div>明细</div> <div><a-icon type="close" style="color: rgba(0, 0, 0, 0.85)" @click="visibleActived = null" /></div>
                </div>
                </template>
                <template slot="content">
                 <div class="content-detail">
                  <transaction-detail :tradeInfos="tradeInfo"></transaction-detail>
                 </div>
                </template>
                <button id="button"><a @click="handleClickChange(rowInfo.orderId)">查看所有</a></button>
              </a-popover>
            </div>
          </div>
        </div>
        <!-- 第三列 -->
        <div class="column column-3">
          <div>
            <div>配送标准:{{ rowInfo.deliveryStandards }}</div>
            <div>收件人-电话:{{ rowInfo.receiverName }}+{{ rowInfo.receiverPhone }}</div>
            <div>公司名称:{{ rowInfo.receiverCompany }}</div>
            <div style="word-break: break-all; word-wrap: break-word">收件地址:{{ rowInfo.receiverAddress1 }}
              <span v-if="rowInfo.receiverAddress2"> — {{ rowInfo.receiverAddress2 }}</span>
              <span v-if="rowInfo.receiverAddress3"> — {{ rowInfo.receiverAddress3 }}</span>
            </div>
            <div>邮编:{{ rowInfo.receiverZipCode }}</div>
          </div>
        </div>
        <!-- 第四列 -->
        <div class="column column-4">
          <div>
            <div>发货方式:<span :style="{ color: rowInfo.deliveryWay === 'AFN' ? '#8400ff' : '#F59A23' }">{{rowInfo.deliveryWay_dictText }}</span></div>
            <div>发货仓:{{ rowInfo.deliveryWarehouse }}</div>
            <div>发货进度:{{ rowInfo.amzOrderStatus }}</div>
            <div>承运商-跟踪号:{{ rowInfo.trackNumber }}</div>
          </div>
        </div>
        <div class="column column-5">
          <div>
            <div>运营备注:</div>
            <div>{{ rowInfo.remark }}</div>
            <div>
              <button id="button"><a @click="addRemarkHandle(rowInfo)">添加备注</a></button>
            </div>
          </div>
        </div>
        <div class="column column-6">
          <div>
            <div><label>创建:</label>{{ rowInfo.purchaseDate ? rowInfo.purchaseDate.slice(0, 16) : '' }}</div>
            <div><label>审核:</label>{{ rowInfo.auditTime ? rowInfo.auditTime.slice(0, 16) : '' }}</div>
            <div><label>发货:</label>{{ rowInfo.deliveryTime ? rowInfo.deliveryTime.slice(0, 16) : '' }}</div>
            <div><label>变更:</label>{{ rowInfo.lastUpdateDate ? rowInfo.lastUpdateDate.slice(0, 16) : '' }}</div>
          </div>
        </div>
      </div>
      <div class="card-bottom" v-if="rowInfo.remark1">{{ rowInfo.remark1 }}</div>
    </div>
    <add-remark-modal ref="addRemarkRef" @addRemarkOk="addRemarkCallBack"></add-remark-modal>
    
    <amz-order-info-detail-modal ref="amzOrderInfoDetailRef"></amz-order-info-detail-modal>
  </div>
</template>
<script>
import goodList from './goodList.vue'
import addRemarkModal from './addRemarkModal.vue'
import AmzOrderInfoDetailModal from './AmzOrderInfoDetailModal.vue'
import transactionDetail from '../components/transactionDetail.vue'
import moment from 'moment'
import Clipboard from 'clipboard'
import { getAction } from '@/api/manage'
export default {
  props: {
    rowRecord: {
      type: Object,
    },
  },
  components: { goodList, addRemarkModal, AmzOrderInfoDetailModal,transactionDetail },
  data() {
    return {
      emptyImg: require('@/assets/oms/emptyImg.png'),
      remarkVisible: false, //添加备注
      toggleSearchStatus: false,
      visibleActived:'',   //查看所有气泡卡
      tradeInfo:{},
      url:{
        queryTradeInfo:'/oms/order/amzOrderInfo/queryTradeInfo',
      },
    }
  },
  mounted() {},
  computed: {
    rowInfo() {
      return this.rowRecord
    },
  },
  methods: {
    moment,
    //设置订单状态标签颜色
    setTagColor(status) {
      switch (status) {
        case 'pending': //待审核
          return 'blue'
        case 'unshipped': //待发货
          return 'orange'
        case 'shipped': //已发货
          return 'green'
        case 'lack': //缺货中
          return 'purple'
        case 'problem': //问题件
          return 'red'
        case 'invalid': //已作废
          return ''
        default:
          return 'blue'
      }
    },
    //计算单价
    calculateUnitPrice(price, quantity) {
      return price ? (price / quantity).toFixed(2) : 0
    },
    //添加备注
    addRemarkHandle(record) {
      let obj = {
        id: record.id,
        remark: record.remark,
      }
      this.$refs.addRemarkRef.showModal(obj)
    },
    //添加备注成功后的回调
    addRemarkCallBack(info) {
      this.$set(this.rowInfo, 'remark', info.remark)
    },
    //查看明细
    searchDetailHandle(orderId) {
      // this.$refs.transactionDetailRef.showModal(orderId)
    },
    //查看明细
    handleClickChange(orderId){
      getAction(this.url.queryTradeInfo,{orderId})
        .then(res=>{
          if(res.success){
            this.tradeInfo = res.result || {}
            this.visibleActived = orderId
          }else{
            this.$message.warning(res.message)
          }
        })
    },
    //隐藏明细气泡卡片
    handleVisibleChange(value){
      if(!value){
        this.visibleActived = null
      }
    },
    //订单详情
    detailHandle(info) {
      this.$refs.amzOrderInfoDetailRef.showModal(info)
    },
    //展开
    toggleClick(status) {
      this.$set(this.rowInfo, 'toggleSearchStatus', !status)
    },
    //商品名称跳转
    goodLinkHandle(record){
      if(record.goodsLink){
        window.open(record.goodsLink)
      }
    },
    //计算最晚发货超时时间
    //有发货时间，发货时间与最晚发货时间计算,没有发货时间，当前系统时间与最晚发货时间计算
    calculateTimeOutShipDate(record) {
      if (record.latestShipDate) {
        //有发货时间， 最晚发货时间小于发货时间  
        if(record.lastUpdateDate && moment(record.lastUpdateDate).isAfter(moment(record.latestShipDate))){
          return this.calculateTime(record.latestShipDate,record.lastUpdateDate)
        } 
        //当前时间与最晚返货时间
        if(moment().isAfter(moment(record.latestShipDate))){
         return this.calculateTime(record.latestShipDate,null)
        }else{
          return false
        } 
      }else{
        return false
      }
    },
    //计算时间
    calculateTime(startTime,endTime){
      const startDate = moment(startTime)
      const endDate = endTime ? moment(endTime) :moment()
      // 计算相差的天数
    const days = endDate.diff(startDate, 'days');
       // 计算去掉天数后剩余的小时数
    const remainingHours = endDate.clone().subtract(days, 'days').diff(startDate, 'hours');
     // 计算去掉天数和小时数后剩余的分钟数
    const remainingMinutes = endDate.clone().subtract(days, 'days').subtract(remainingHours, 'hours').diff(startDate, 'minutes');
    return `[超时]${days}天${remainingHours}时${remainingMinutes}分`
    },
    //复制
    copyHandle(orderId) {
      let clipboard = new Clipboard('#tag-copy', {
        text: () => {
          return orderId
        },
      })
      clipboard.on('success', () => {
        this.$message.success('复制成功！')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('该浏览器不支持自动复制,请手动复制！')
        clipboard.destroy()
      })
    },
  },
}
</script>
<style lang="less" scoped>
label {
  color: #aaaaaa;
}
#button{
  padding: 0 !important;
  height: auto;
  border: none;
  background: transparent;
}
#button:focus{
  border: none !important;
  outline: none;
  box-shadow: none;
}
.goods-name {
  width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: nowrap;
}
.card-hearder {
  height: 35px;
  background: #fafafa;
  width: 100%;
  padding: 0 5px;
  display: flex;
  align-items: center;
  text-align: left;
  border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  .card-hearder-column-1 {
    width: 600px;
    position: relative;

    /deep/.ant-tag {
      position: absolute;
      right: 0px;
    }
  }

  .card-hearder-column-2 {
    width: 275px;
  }

  .card-hearder-column-3 {
    width: 265px;
  }
}

/* 中间内容 */
.container {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  justify-content: space-evenly;
}

/* 每一列的基础样式 */
.column {
  border-right: 1px solid #e8e8e8;
  box-sizing: border-box;
}

/* 第一列：内部再分为两列 */
.column-1 {
  display: flex;
  width: 680px;

  /* 第一列总宽度 */
  .sub-column {
    width: 680px;
    text-align: left;
    position: relative;
    .sub-column-row {
      display: flex;
      justify-content: space-between;
      width: 600px;
      padding: 10px 5px;
    }
    .expand {
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 10%;
    }
    .sub-column-row-right {
      width: 80px;
      height: 100%;
      text-align: center;
      padding: 5px;
      border-left: 1px solid #e8e8e8;
      display: table;

      & > div:first-child {
        display: table-cell;
        vertical-align: middle;
      }
    }
  }
}

/* 第二列到第六列的宽度 */
.column-2,
.column-3,
.column-4,
.column-5,
.column-6 {
  text-align: left;
  padding: 5px;
  white-space: break-spaces;
  display: table;

  & > div:first-child {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
  }
}

.column-2 {
  width: 195px;
  .content-detail{
    padding: 10px;
  }
}

.column-3 {
  width: 260px;
}

.column-4 {
  width: 195px;
}

.column-5 {
  width: 130px;
}

.column-6 {
  width: 147px;
  border-right: none;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

li {
  display: flex;
  flex: 1;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}

.card-bottom {
  color: #d9001b;
  line-height: 32px;
  text-align: left;
  padding-left: 10px;
  border-top: 1px solid #e8e8e8;
}
</style>